<style>
    .layui-top-box {padding:20px 20px 20px 20px;color:#fff}
    .panel {margin-bottom:17px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:15px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
</style>
<div class="layui-carousel" id="test1" lay-filter="carofilter" style="font-size:larger">
    <div carousel-item>
        <div ><img src="./lib/layui-v2.5.5/images/banner-1.jpg" alt="" width="100%" height="100%"></div>
        <div ><img src="./lib/layui-v2.5.5/images/banner-2.jpg" alt="" width="100%" height="100%"></div>
        <div ><img src="./lib/layui-v2.5.5/images/banner-3.jpg" alt="" width="100%" height="100%"></div>
    </div>
</div>

<div class="layuimini-container layuimini-page-anim">
   <div class="hot"  style="margin: 5px"><span style="font-size: 16px;margin: 10px;font-weight: bolder">二手房信息</span> <div style="
    display: inline;width: 40%;
">
       <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input" style="margin:5px;width: 40%;display: inline-block;">
       <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" >搜索</button>
   </div></div>
    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10" id="main1">

        </div>
    </div>

    <script type="text/html" id="testTpl">
      {{# for(var i=0;i< d.list.length;i++){ }}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">{{ d.list[i].date }}</h3>
                <p>
                    {{ d.list[i].content }}
                </p>
            </div>
        </li>
      {{# } }}

        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <div class="layui-timeline-title">过去</div>
            </div>
        </li>
    </script>

    <!--<div class="layui-col-md18" >-->
        <!--<ul class="layui-timeline">-->

             <!--<div id="testDiv"></div>-->

        <!--</ul>-->
    <!--</div>-->
</div>


    <script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //***************************建造实例
        var ins=carousel.render({
            elem: '#test1'
            , width: '100%'     //设置容器宽度
            , arrow: 'always'    //始终显示箭头，可选hover,none
            //,anim: 'updown'    //切换动画方式，可选fade,default
            , full: false        //全屏
            , autoplay: true     //自动切换
            , interval: 4000     //自动切换的时间间隔
            , index: 3           //初始化时item索引,默认时0
            , indicator:'inside' //指示器位置，可选outside,none
        });

        //**************************监听轮播切换事件
        carousel.on('change(carofilter)', function (obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值
            // console.log(obj.index);     //当前条目的索引
            // console.log(obj.prevIndex); //上一个条目的索引
            // console.log(obj.item);      //当前条目的元素对象
        });

        //****************************重置轮播
        //var ins = carousel.render(options);
        ins.reload({arrow:'hover'});//将arror从alway变成hover
    });
    var url = self.location;
    function goto(e){
        self.location="/projectweb/page/other/myrent.html?id="+e.id;
    }

    layui.use('laytpl',function(){
        var $ = layui.jquery,
            laytpl = layui.laytpl;
    var str1 = '';
        $.ajax({
            url:'http://localhost:8888/houses/queryHouseAll',
            dataType:'json',
            type:'get',
            success:function(data){
               console.log(data.data);
               $.each(data.data,function (i,item) {
                   console.log(item)
                   str1 +=`<div class="layui-col-md3">
                                    <div class="col-xs-6 col-md-3" id="${item.id}" onclick="goto(this)">
                                        <div class="panel layui-bg-orange">
                                            <div class="panel-body">
                                                <div class="panel-title" >
                                                    <span class="label pull-right layui-bg-green">${item.area}m²</span>
                                                    <span class="label pull-right layui-bg-green">￥${item.price}</span>
                                                    <h5 id="house_title">${item.city} ${item.county} ${item.address}  </h5>
                                                </div>
                                                <div class="panel-content">
                                                <h1 class="no-margins"><span id="wx"></span></h1>
                                <div class="stat-percent font-bold text-gray"></div>
                                <small>当前分类总记录数</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`
                   $('#main1').html(str1);
               })
            }
        });
        //遍历公告数据
        // $.ajax({
        //     url:SURL+'index/queryNoticeAll',
        //     dataType:'json',
        //     type:'post',
        //     success:function(res){
        //         var gettpl=document.getElementById("testTpl").innerHTML;
        //         laytpl(gettpl).render(res,function(html){
        //               document.getElementById("testDiv").innerHTML=html;
        //         })
        //     }
        // })

    })
</script>


